<template>
	<view style="padding: 5px;">
		<uni-row>
			<uni-col :span="9" :offset="2">
				<uni-data-select :clear="false" :localdata="classSelect" @change="changeClass" placeholder="请选择班级" style="margin-right: 20px;"></uni-data-select>
			</uni-col>
	
			<uni-col :span="9" :offset="2">
				<uni-data-select :clear="false" :localdata="stuSelect" @change="changeStudent" placeholder="请选择学生"></uni-data-select>
			</uni-col>
		</uni-row>
		
		<uni-card v-if = "selectStudent!==''">
			<image style="width: 100%;" :src="stuPhoto" @click="imgClick"></image>
			<view class="info-container">
			      <text>班级：{{ selectStudent.className }}</text>
			      <text class="name-right">姓名：{{ selectStudent.studentName }}</text>
			</view>
			<view slot="actions" class="card-actions">
				<view class="card-actions-item">
					<button type="warn" @click="registration(selectStudent.studentId,selectStudent.classId,0)">请假</button>
				</view>
				<view class="card-actions-item">
					<button type="warn" @click="registration(selectStudent.studentId,selectStudent.classId,1)">临时请假</button>
				</view>
				<view class="card-actions-item">
					<button type="warn" @click="registration(selectStudent.studentId,selectStudent.classId,2)">未到</button>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import morningExercises from '@/api/modules/morningExercises.js'
	export default {
		data() {
			return {
				userName: uni.getStorageSync("loginName"),
				classSelect: [],
				stuSelect: [],
				stuList: [],
				selectStudent: '',
				stuPhoto: '',
			}
		},
		created() {
			this.getAllAppClassList();
		},
		methods: {
			//班级加载
			getAllAppClassList() {
				this.$api.instructor.getAllAppClassList().then(res => {
					res.data.forEach((item, index) => {
						this.classSelect.push({ value: item.classId, text: item.className });
					})
				})
			},
			//班级下拉选择
			changeClass(classId) {
				this.getClassStuListByClassId(classId);
			},
			//根据班级id加载学生信息
			getClassStuListByClassId(classId) {
				this.$api.instructor.getClassStuListByClassId(classId).then(res => {
					console.log('学生信息',res.data);
					this.stuList = res.data;

					this.stuSelect=[];
					res.data.forEach((item, index) => {
						this.stuSelect.push({ value: item.studentId, text: item.studentName });
					})
				})
			},
			//学生下拉选择
			changeStudent(stuId) {
				this.stuList.forEach((item,index)=> {
					if(item.studentId === stuId) {
						this.stuPhoto = item.stuPhoto ? item.stuPhoto : 'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png';
						this.selectStudent = {
							classId : item.classId,
							className : item.className,
							studentName : item.studentName,
							studentId : item.studentId,
						}
					}
					return;
				})
			},
			//登记
			registration(studentId,classId,type) {
				morningExercises.exercisesRegister(studentId,classId,type,this.userName,).then( res => {
					uni.showToast({
						title: "登记成功"
					})
				})
			},
			//照片预览
			imgClick() {
				uni.previewImage({
					current: 0,
					urls: [this.stuPhoto]
				})
			}
		},
	}
</script>

<style>
.info-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-actions {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	height: 70px;
	border-top: 1px #eee solid;
}
.card-actions-item {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.card-actions-item-text {
	font-size: 12px;
	color: #666;
	margin-left: 5px;
}
</style>
